import React, { Component } from 'react';
import './index.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as listActions from '../../store/actions/list';

interface Iprops{
    name:string,
    price:number,
    desc:string,
    num:number,
    pic:string,
    id:number,
    parentIndex:number,
    changeNum:(status:string,parentIndex:number,product:number) => void
}

class Product extends Component<Iprops> {
    render() {
        let {id,name,price,desc,num,pic,parentIndex} = this.props;
        return (
            <dl className="product">
                <dt>
                    <img src={pic} alt=""/>
                </dt>
                <dd>
                    <h6>{name}</h6>
                    <span>{price}</span>
                    <p>{desc}</p>
                    <div>
                        <button style={{display:num>0 ? 'block':'none'}} onClick={() => this.props.changeNum('-',parentIndex,id)}>-</button>
                        <span  style={{display:num>0 ? 'block':'none'}}>{num}</span>
                        <button onClick={() => this.props.changeNum('+',parentIndex,id)}>+</button>
                    </div>
                </dd>
            </dl>
        )
    }
}

const stateMapToProps = (state:any) => {
    return {
        
    }
}

const dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators(listActions,dispatch)
}

export default connect(stateMapToProps,dispatchMapToProps)(Product)